<template>
  <ul 
    :class="[
      'bx-timeline',
      'bx-glass',
      {
        'bx-timeline--reverse': reverse,
        'bx-timeline--horizontal': layout === 'horizontal'
      }
    ]"
  >
    <slot></slot>
  </ul>
</template>

<script>
import { provide } from 'vue'

export default {
  name: 'BxTimeline',
  props: {
    reverse: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: 'vertical',
      validator: (value) => ['vertical', 'horizontal'].includes(value)
    }
  },
  setup(props) {
    provide('timelineLayout', props.layout)
    return {}
  }
}
</script>

<style scoped>
.bx-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--bx-font-family);
  color: var(--bx-text-primary);
  position: relative;
}

.bx-timeline--vertical {
  padding-left: 20px;
}

.bx-timeline--horizontal {
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
}

.bx-timeline--reverse .bx-timeline-item {
  flex-direction: row-reverse;
}

/* Responsive */
@media (max-width: 768px) {
  .bx-timeline--horizontal {
    flex-direction: column;
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>

